<template>
  <div id="DetailInto">
    <div class="top">
      <img style="margin: 0 auto" width="280" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/12.png" />
      <p>
        <span style="width:120px;display: inline-block;text-align: left;">基本信息</span>
        <span style="width:80px;display: inline-block;text-align: left">鉴定信息</span>
        <span style="width:80px;display: inline-block;text-align: right">危改审批</span>
      </p>
    </div>
    <div class="content">
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
        <span style="margin-right: 10px;" class="line"></span>
        基本信息
      </p>
      <div class="list">
        <ul>
          <li v-for="(item,index) in JBXXcontentData" :key="index" :style="{borderBottom:index===JBXXcontentData.length-1?'none':'1px solid #D2D2D2'}">
            <span style="margin-right: 20px;font-size: 14px;">{{item.name}}</span>
            <span v-if="item.value == 'F_SCITY'||item.value == 'F_XCITY'||item.value == 'F_VILLAGE'||item.value == 'F_SSZZ'" style="float: right;font-size: 14px;">{{rowData[item.value] | inUseName1(item.children)}}</span>
            <span v-else-if="item.children" style="float: right;font-size: 14px;">{{rowData[item.value] | inUseName(item.children)}}</span>
            <span v-else style="float: right;font-size: 14px;">{{rowData[item.value]}}</span>
          </li>
        </ul>
      </div>
      <p style="height: 50px;display: flex;align-items: center;border-bottom: 1px solid #D2D2D2;">
        <span style="margin-right: 10px;" class="line"></span>
        鉴定机构
      </p>
      <div class="list">
        <div class="inputWrap">
          <span style="color: red">*</span>
          <van-field readonly clickable name="picker" :value="rowData.JDJG" label="鉴定机构" placeholder="请选择"  @click="selectAuthenticate" />
        </div>
        <!--<van-popup v-model="ENUM.JDJG" position="bottom">-->
          <!--<van-picker show-toolbar :columns="ENUM.JDJGARR" value-key="QYZZMC" @confirm="onConfirmJDJG" @cancel="ENUM.JDJG = false" />-->
        <!--</van-popup>-->
        <div class="inputWrap">
          <span style="color: red">*</span>
          <van-field
            readonly
            v-model="rowData.TYSHXYDM"
            label="统一社会信用代码"
          />
          <!--<van-field :value="rowData.JDJGFZR" label="机构负责人" placeholder="请输入" />-->
        </div>
        <div class="inputWrap">
          <!--<span style="color: red">*</span>-->
          <van-field
            readonly
            v-model="rowData.DWDZ"
            label="单位地址"
          />
        </div>
        <div class="inputWrap">
          <span style="color: red">*</span>
          <van-field readonly name="picker" :value="formData.JDSJ" label="通知鉴定时间" placeholder="请选择" @click="show = true" />
        </div>
        <van-calendar v-model="show" type="range" @confirm="onConfirm" />
      </div>
      <div style="margin-top:10px; display: flex;justify-content: space-between;">
        <el-button type="primary" style="width: 40vw;" size="mini" @click="saveData">提交</el-button>
        <el-button type="primary" style="width: 40vw;" size="mini">电子地图</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import dd from "gdt-jsapi";
import { QuerySignCallback, FileServerProxy, getRegister1 } from '@/utils/api'
export default {
  data() {
    return {
      rowData: {},
      JBXXcontentData: [
        {
          name: '姓名',
          value: 'F_HOUSEAPPLICANT'
        },
        {
          name: '身份证号',
          value: 'F_CERTIFICATECODE'
        },
        {
          name: '手机号',
          value: 'F_APPLYPHONE'
        },
        {
          name: '户籍地址',
          value: 'F_PERMANENTADDR'
        },
        {
          name: '申请方式',
          value: 'F_SQFS',
          children: []
        },
        {
          name: '代办人姓名',
          value: 'F_DBRXM',
        },
        {
          name: '代办人身份证号',
          value: 'F_DBRSFZH',
        },
        {
          name: '代办人手机号',
          value: 'F_DBRSJH',
        },
        {
          name: '所属市',
          value: 'F_SCITY',
          children: []
        },
        {
          name: '所属县',
          value: 'F_XCITY',
          children: []
        },
        {
          name: '所属村',
          value: 'F_VILLAGE',
          children: []
        },
        {
          name: '所属镇',
          value: 'F_SSZZ',
          children: []
        },
        {
          name: '东至',
          value: 'F_DONG'
        },
        {
          name: '西至',
          value: 'F_XIZHI'
        },
        {
          name: '南至',
          value: 'F_NANZHI'
        },
        {
          name: '北至',
          value: 'F_BEIZHI'
        },
        {
          name: '房屋编码',
          value: 'F_FWTYBH'
        },
        {
          name: '檐口高度',
          value: 'F_BUILDHEIGHT'
        },
        {
          name: '宅基地面积',
          value: 'F_HOMESTEADAREA'
        },
        {
          name: '住房建筑面积',
          value: 'F_HOUSEFLOORAREA'
        },
        {
          name: '占地面积',
          value: 'F_BUILDAREA'
        },
        {
          name: '建筑层数',
          value: 'F_BUILDSTOREY'
        },
        {
          name: '地类_农用地',
          value: 'F_DL_NYD',
          children: []
        },
        {
          name: '地类_农用地_其他',
          value: 'F_YDLX_NYD_QT'
        },
        {
          name: '用地类型',
          value: 'F_YDLX',
          children: []
        },
        {
          name: '建设类型',
          value: 'F_APPLYTYPE',
          children: []
        },
        {
          name: '地址',
          value: 'F_CONSTRUCITONADDRESS'
        },
      ],
      ENUM: {
        JDJGARR: [],
        JDJG: false
      },
      formData: {
        JDSJ: ""
      },
      show: false,
    }
  },
  filters: {
    inUseName: function (msg, data) {
      let name = "";
      data.forEach((item) => {
        if (item.DICID == msg) {
          name = item.DICNAME;
        }
      });
      return name;
    },
    inUseName1: function (msg, data) {
      let name = ''
      data.forEach(item => {
        if (item.CITYCODE == msg) {
          name = item.CITYNAME
        }
      })
      return name
    }
  },
  methods: {
    selectAuthenticate() {
      ;
      this.$router.push({
        path: "/authenticateUnitlist",
        query:{
          data2:this.$route.query.data
        }
      });
    },
    getEnumeration: async function (dataguid) {
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
           cityCode: window.localStorage.getItem("citycode")
              ? window.localStorage.getItem("citycode")
              : "441300000000",
        params: {
          dataguid: dataguid,
          searchObject: JSON.stringify([]),
          token: window.localStorage.getItem("token"),
        },
      };
      const res = await FileServerProxy(params);
      let data = JSON.parse(res.data.data).Data
      switch (dataguid) {
        case 'b3be00d8-bd87-4601-8ef0-9b7b0c8929cf':
          this.ENUM.JDJGARR = data;
          break
        case 'db35edee-88e0-4fae-b14a-868ed4beb1d9':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '建设类型') {
              item.children = data
            }
          })
          break
        case 'd2ec96d4-b5bc-404a-a9f1-34db915c694b':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '用地类型') {
              item.children = data
            }
          })
          break
        case '52215e71-341a-452b-8823-a8d4aae058ab':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '地类_农用地') {
              item.children = data
            }
          })
          break
        case 'c7e2cc1c-1757-4ebb-af08-4fb7bc53ac15':
          this.JBXXcontentData.forEach((item, index) => {
            if (item.name === '申请方式') {
              item.children = data
            }
          })
          break
      }
    },
    onConfirmJDJG(data) {
      this.rowData.JDJG = data.QYZZMC;
      this.rowData.JDJGFZR = data.ST_NAME;
      this.rowData.JDJGID = data.ST_ID;
      this.ENUM.JDJG = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.formData.JDSJ = `${this.formatDate(start)} —— ${this.formatDate(end)}`;
    },
    getCityOpenDataView: async function () {
      let dataGuid = 'e9c98787-4966-4365-80b0-c1cc678c6f85'
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
        
        params: {
          dataguid: dataGuid,
          searchObject: JSON.stringify([]),
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属市') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getXianOpenDataView: async function (data) {
      let dataGuid = '77fdf2b0-0eb5-4243-a0a4-6185299ccd34'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
        
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属县') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getTownOpenDataView: async function (data) {
      let dataGuid = '24d07248-ba49-4b82-9029-b5eccaff179d'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
        
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属镇') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    getCunOpenDataView: async function (data) {
      let dataGuid = 'd3aaed7c-84ee-4de3-b70e-07fe188cdc8e'
      let searchObject = JSON.stringify([{ field: 'pid', value: data, operator: '=' }])
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",
        
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.JBXXcontentData.forEach((item, index) => {
        if (item.name === '所属村') {
          item.children = JSON.parse(res.data.data).Data
        }
      })
    },
    saveData: async function () {
      this.rowData.TZJDKSSJ = this.formData.JDSJ.split("——")[0]
      this.rowData.TZJDJSSJ = this.formData.JDSJ.split("——")[1]
      this.rowData.F_SBLX = 1
      this.rowData.F_APPRAISAL = 242
      let params = {
        accessCode: '77ad6c1591e54d4fbc45ecc90374a2a2',
        
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          dataGuid: '3b36a144-a96d-451f-bf26-43ff4583440f',
          strParams: JSON.stringify([this.rowData]),
          token: window.localStorage.getItem('token')
        }
      }
      if (this.rowData.JDJG && this.rowData.TYSHXYDM && this.formData.JDSJ) {
        const res = await FileServerProxy(params)
        if (eval('(' + res.data.data + ')').Success == true) {
          this.$toast.success('成功！')
          this.$router.push({
            path: '/TreeSelectAutoSend',
            query: { data: this.rowData, type: "未鉴定" }
          })
          //注册接口
          // let pae = {
          //   loginName: this.rowData.F_HOUSEAPPLICANT, //用户
          //   cityCode: this.rowData.F_VILLAGE, //村citycode
          //   idNum: this.rowData.F_CERTIFICATECODE, //身份证号
          //   phone: this.rowData.F_APPLYPHONE,
          //   buildType: 0
          // }
          // const data1 = await getRegister1(pae)
          let Base64 = require("js-base64").Base64;
          let pae = {
            loginName:Base64.decode(this.rowData.F_HOUSEAPPLICANT),
            citycode: this.rowData.F_VILLAGE, //村citycode
            idNum: this.rowData.F_CERTIFICATECODE, //身份证号
            phone: this.rowData.F_APPLYPHONE,
            buildType: 0
          };
          let p = {
            accessCode: "6e9625b5c366654eb306aa372145b759",
            cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
            params: pae
          }
          const data1 = await QuerySignCallback(p);
        } else {
          this.$toast.fail(res.data.msg)
        }
      } else {
        this.$toast.fail("请输入必填项")
      }
    }
  },
  mounted() {
    this.getEnumeration("b3be00d8-bd87-4601-8ef0-9b7b0c8929cf")
    this.getEnumeration("db35edee-88e0-4fae-b14a-868ed4beb1d9")
    this.getEnumeration("d2ec96d4-b5bc-404a-a9f1-34db915c694b")
    this.getEnumeration("52215e71-341a-452b-8823-a8d4aae058ab")
    this.getEnumeration("c7e2cc1c-1757-4ebb-af08-4fb7bc53ac15")
    this.rowData = JSON.parse(this.$route.query.data)
    if(this.$route.query.data1){
      this.rowData.JDJG = this.$route.query.data1.QYMC
      this.rowData.TYSHXYDM = this.$route.query.data1.ZZJGDM
      this.rowData.DWDZ = this.$route.query.data1.DWDZ
    }
    this.getCityOpenDataView()
    this.getXianOpenDataView(this.rowData.F_SCITY)
    this.getTownOpenDataView(this.rowData.F_XCITY)
    this.getCunOpenDataView(this.rowData.F_SSZZ)
    if (this.rowData.TZJDKSSJ){
      this.formData.JDSJ = this.rowData.TZJDKSSJ.split(" ")[0] + "——" + this.rowData.TZJDJSSJ.split(" ")[0];
    }
    dd.ready(function () {
      dd.setTitle({
        title: '详细信息'
      })
        .then(res => {
        })
        .catch(err => {
          console.error(err)
        })
    })
  }
}
</script>
<style scoped lang="scss">
#DetailInto {
  height: 100vh;
  overflow: auto;
  background: #f6f6f6;
  .top {
    height: 122px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 35px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .content {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 10px;
    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }
    .list ul li {
      min-height: 40px;
      line-height: 40px;
    }
    .inputWrap {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ebedf0;
      padding: 0 16px;
      span {
        margin-right: 5px;
      }
      .van-cell {
        padding: 10px 0 !important;
      }
    }
  }
}
</style>
<style lang="scss">
#DetailInto {
  .el-checkbox-button {
    margin-left: 3px;
    .el-checkbox-button__inner {
      border-radius: 30px;
      border-left: 1px solid #dcdfe6;
    }
  }
  .el-checkbox-button:nth-child(1) {
    margin-left: 0px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-input__inner {
    border: none;
  }
}
</style>
